<template>
  <div class="circle-node">
    <!-- 顶部连接点：source 和 target -->
    <Handle type="target" position="top" class="handle" id="top-target" />
    <Handle type="source" position="top" class="handle" id="top-source" />
    <!-- 左侧连接点：source 和 target -->
    <Handle type="target" position="left" class="handle" id="left-target" />
    <Handle type="source" position="left" class="handle" id="left-source" />
    <!-- 右侧连接点：source 和 target -->
    <Handle type="target" position="right" class="handle" id="right-target" />
    <Handle type="source" position="right" class="handle" id="right-source" />
    <!-- 底部连接点：source 和 target -->
    <Handle type="target" position="bottom" class="handle" id="bottom-target" />
    <Handle type="source" position="bottom" class="handle" id="bottom-source" />
    <!-- 节点本体 -->
    <div class="circle">
      <div v-if="isEditing" class="edit-input-wrapper">
        <input
          v-model="localLabel"
          @blur="saveLabel"
          @keyup.enter="saveLabel"
          @keyup.escape="cancelEdit"
          ref="inputRef"
          class="edit-input"
          @click.stop
        />
      </div>
      <div v-else class="label" @click.stop="startEditing">{{ data.label }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue'
import { Handle } from '@vue-flow/core'
import { editingNodeId } from './store'
import { message } from 'ant-design-vue'

const props = defineProps({ data: Object, id: String })
const emit = defineEmits(['updateLabel'])

const localLabel = ref(props.data.label)
const isEditing = computed(() => props.id === editingNodeId.value)
const inputRef = ref(null)

function startEditing() {
  // editingNodeId.value = props.id
  // nextTick(() => {
  //   if (inputRef.value) {
  //     inputRef.value.focus()
  //   }
  // })
}

function saveLabel() {
  if (localLabel.value.trim()) {
    emit('updateLabel', props.id, localLabel.value)
  } else {
    localLabel.value = props.data.label
    message.warning('节点名称不能为空')
  }
  editingNodeId.value = null
}

function cancelEdit() {
  localLabel.value = props.data.label
  editingNodeId.value = null
}
</script>

<style scoped>
.circle-node {
  position: relative;
  width: 80px;
  height: 80px;
  overflow: visible;
}

.circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #ff9f1c;
  border: 2px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  box-sizing: border-box;
}

.label {
  pointer-events: auto;
  cursor: text;
  font-size: 12px;
  text-align: center;
  padding: 4px;
  max-width: 90%;
  word-break: break-all;
}

.edit-input-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-input {
  width: 70%;
  height: 20px;
  font-size: 12px;
  text-align: center;
  border: 1px solid #333;
  border-radius: 4px;
  background: #fff;
  color: #333;
  padding: 2px;
}

.handle {
  width: 10px;
  height: 10px;
  background: #ff0000;
  border-radius: 50%;
  position: absolute;
}

:deep(.vue-flow__handle-top) {
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
}

:deep(.vue-flow__handle-bottom) {
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}

:deep(.vue-flow__handle-left) {
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
}

:deep(.vue-flow__handle-right) {
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
}
</style>
